{include file="common/head"/}
<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css">
<script src="__STATIC__/plugins/layui/layui.js"></script>
<style>

    .bg{
        width: 100%;
        /*height: 1382px;*/
        background-image:url(__STATIC__/home/images/apaike/bg-login.png);
    }
    .bg-blur {
        /*float: left;*/
        width: 100%;
        height: 1382px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        -webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
    }
    .res-box{
        width: 100%;
        overflow: hidden;
        z-index: 10;
    }
    .res-con{
        width: 1442px;
        height: 1382px;
        margin: 30px auto;
        background: #fdfcfc;
    }
    .res-con-box{
        width:623px ;
        margin: 0 auto;

    }
    .res-title{
        display: inline-block;
        width: 100%;
        height: 175px;
        font-size: 48px;
        font-weight: 700;
        line-height: 150px;
        color: #2f88c6;
    }
    .res-con-top{
        width: 100%;
        height: 470px;
        border-bottom: 1px solid #dcdcdc;
    }
    .res-con-cent{
        width: 100%;
        height: 303px;
        border-bottom: 1px solid #dcdcdc;
    }
    .res-con-foot{
        width: 100%;
        height: 368px;
    }
    .first-name{
        float: left;
    }
    .last-nam{
        float: right;
    }
    .li-style{
        margin-bottom: 35px;
    }
    .cent-zi{
        font-size: 16px;
        color: #8f8f8f;
    }
    .foot-title{
        margin-top: 40px;
    }
    .foot-code{
        width: 312px;
        height: 148px;
        margin-top: 28px;

    }

</style>

<div class="res-box bg">
    <!--<div class="bg bg-blur"></div>-->
    <div class="res-con">
        <div class="res-con-box">
            <span class="res-title">Create Your Apex Account</span>
            <form action="">
                <div class="res-con-top">
                    <ul class="top-box" style="width: 532px;margin: 0 auto">
                        <li class="first-name li-style"><input style="width:250px;height: 42px;border-radius: 3px" type="text" id="first-name" name="first_name" required lay-verify="required" placeholder="First-name" autocomplete="off" class="layui-input"></li>
                        <li class="last-nam li-style"><input style="width: 250px;height: 42px;border-radius: 3px" type="text" id="last-nam" name="last_nam" required lay-verify="required" placeholder="Last-nam" autocomplete="off" class="layui-input"></li>
                        <li class="li-style"><input style="width: 100%;height: 42px;border-radius: 3px" type="text" id="compay" name="compay" required lay-verify="required" placeholder="Compay" autocomplete="off" class="layui-input"></li>
                        <li class="li-style"><input style="width: 100%;height: 42px;border-radius: 3px" type="text" id="address" name="address" required lay-verify="required" placeholder="Address" autocomplete="off" class="layui-input"></li>


                        <li class="first-name li-style"><input style="width: 250px;height: 42px;border-radius: 3px" type="text" id="caty" name="caty" required lay-verify="required" placeholder="Caty" autocomplete="off" class="layui-input"></li>
                        <li class="last-nam li-style"><input style="width: 250px;height: 42px;border-radius: 3px" type="text" id="state" name="state" required lay-verify="required" placeholder="State" autocomplete="off" class="layui-input"></li>
                        <li class="first-name li-style"><input style="width: 250px;height: 42px;border-radius: 3px" type="text" id="country" name="country" required lay-verify="required" placeholder="Country" autocomplete="off" class="layui-input"></li>
                        <li class="last-nam li-style"><input style="width: 250px;height: 42px;border-radius: 3px" type="text" id="code" name="code" required lay-verify="required" placeholder="ZIP Code" autocomplete="off" class="layui-input"></li>
                        <li class="first-name li-style"><input style="width: 250px;height: 42px;border-radius: 3px" type="text" id="phone" name="phone" required lay-verify="required" placeholder="Phone" autocomplete="off" class="layui-input"></li>
                        <li class="last-nam li-style"><input style="width: 250px;height: 42px;border-radius: 3px" type="text" id="email" name="email" required lay-verify="required" placeholder="E-mail" autocomplete="off" class="layui-input"></li>

                    </ul>
                </div>
                <div class="res-con-cent">
                    <ul class="cent-box" style="width: 532px;margin: 0 auto">
                        <li class="first-name" style="margin-top:47px ">
                            <input style="width:15px;height: 15px;" type="radio" name="registration" value="" title=""><span class="cent-zi">&nbsp;&nbsp;&nbsp;Mobile registration</span>
                                <input style="width:15px;height: 15px;margin-left:35px" type="radio" name="registration" value="" title="" checked><span class="cent-zi">&nbsp;&nbsp;&nbsp;Mailbox registration</span>
                        </li>
                        <li>
                            <div class="first-name">
                                <input style="width: 360px;height: 42px;border-radius: 3px" type="text" id="" name="" required lay-verify="required" placeholder="name@example.com" autocomplete="off" class="layui-input"></div>
                            <div class="last-nam li-style">
                                <input style="width: 140px;height: 42px;border-radius: 3px" type="text" id="code" name="code" required lay-verify="required" placeholder="Code" autocomplete="off" class="layui-input">
                            </div>
                        </li>
                        <li class="li-style"> <input style="width: 100%;height: 42px;border-radius: 3px" type="password" id="" name="password" required lay-verify="required" placeholder="password" autocomplete="off" class="layui-input"></li>
                        <li class="li-style"> <input style="width: 100%;height: 42px;border-radius: 3px" type="password" id="" name="rpassword" required lay-verify="required" placeholder="Confirm password" autocomplete="off" class="layui-input"></li>
                    </ul>
                </div>
                <div class="res-con-foot">
                    <ul>
                        <li class="foot-title">
                            <div>
                                <input style="width: 16px;height: 16px;" type="checkbox" name="" title="写作" lay-skin="primary" checked>
                                <span style="font-size: 16px;font-weight: 700;color: #8f8f8f">&nbsp;&nbsp;&nbsp;Subscription</span>
                            </div>
                            <div style="text-indent: 32px;color: #8f8f8f;">
                                Get last newsletter about Apex products，events， updates and more.
                            </div>
                        </li>
                        <li>
                            <div class="foot-code">

                            </div>
                        </li>
                        <li style="width: 432px;margin: 0 auto;margin-top: 70px">
                            <div class="first-name"><button class="layui-btn" style="width: 147px;height: 40px;border-radius: 3px;background: #FFF;border: 1px solid #bfbfbf;color: #595959">Reste</button></div>
                            <div class="last-nam"><button class="layui-btn" lay-filter="sub" lay-submit style="width: 147px;height: 40px;border-radius: 3px;background: #2f88c6">Confirm</button></div>
                        </li>

                    </ul>
                </div>
            </form>
        </div>

    </div>
</div>
{include file="common/footer"/}
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,$ = layui.jquery;
        // 登录提交监听
        form.on('submit(sub)', function (data) {
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('home/login/register')}",data.field,function(res){
                layer.close(loading);
                if(res.code > 0){
                    layer.msg(res.msg,{time:1000,icon:1},function(){
                        location.href = "{:url('index/index')}";
                    });
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            });
        })
    });
</script>